 <template>
  <div class="filtrate-outer-box">
    <Header />
    <div class="top-banner"></div>
    <div class="flow-template">
      <div class="area1990">
        <h2 class="template-title">定制流程</h2>
        <div class="template-box flex jc-c">
          <div class="path-item">
            <img class="path-img" src="../assets/customization/path-1.png" alt="" />
            <p class="path-des">在线咨询客服进行初步沟通</p>
          </div>
          <div class="path-item">
            <img class="path-img" src="../assets/customization/path-2.jpg" alt="" />
            <p class="path-des">双方技术人员进行技术沟通确定功能要求</p>
          </div>
          <div class="path-item">
            <img class="path-img" src="../assets/customization/path-3.jpg" alt="" />
            <p class="path-des">明确各类费用签订开发协议客户付款</p>
          </div>
          <div class="path-item">
            <img class="path-img" src="../assets/customization/path-4.jpg" alt="" />
            <p class="path-des">按时完成开发，按时出样配合产品调试</p>
          </div>
          <div class="path-item">
            <img class="path-img" src="../assets/customization/path-5.jpg" alt="" />
            <p class="path-des">样品测试完成，进入小批量生产，小批量后才接收大批量订单</p>
          </div>
        </div>
      </div>
    </div>

<!--    <div class="flow-template">-->
<!--      <div class="area1990">-->
<!--        <h2 class="template-title">定制案例</h2>-->
<!--        <div class="template-box flex jc-c" >-->
<!--          <div class="case-item" v-for="(item,i) in list" :key="i">-->
<!--            <img class="case-img" :src="item.litpic" alt=""  @click="getLink(list)" style="cursor: pointer"/>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

    <div class="user-info-box">
      <div class="area1190">
        <h3 class="user-box-title">与我们的顾问联系，了解更多解决方案详情</h3>
        <div class="flex input-info-box">
          <el-input class="input300" placeholder="姓名：" v-model="name">
          </el-input>
          <el-input class="input300" placeholder="联系方式：" v-model="phone"></el-input>
          <el-input class="input558" placeholder="需求说明：" v-model="content"></el-input>
        </div>

        <el-button class="sub-btn" type="danger" @click="submitTo()">提交</el-button>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
export default {
  name: "Customization",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      list:[],
      options: [
        {
          value: "1",
          label: "售前",
        },
        {
          value: "2",
          label: "售后",
        },

      ],
      value: "1",
      name: "",
      content: "",
      phone: "",
    };
  },
  created(){
      this.getList();
  },
  methods: {
    submitTo() {
      //手机号校验
      let url = '/form/sendMessages?';
      url += 'content=' + this.content;
      url += '&name=' + this.name;
      url += '&phone=' + this.phone;
      url += '&type=' + this.value;
      if (!this.checkPhone(this.phone)) {
        return false;
      }
      this.$http.get(url).then(response => {
        this.$message({
          showClose: true,
          message: response.message,
          type: 'success'
        });
      })
    },
    checkPhone(phone) {
      var pattern = /^1[34578]\d{9}$/;
      if (!pattern.test(phone)) {
        this.$message({
          showClose: true,
          message: '手机号有误',
          type: 'error'
        });
        return false;
      }
      return true;
    },
    //查询定制案例文章
    getList(){
      let menuId = 2;
      this.$http.get("/bot_menu/find-menuId/"+menuId).then((response) => {
        console.log("定制案例:"+response)
        this.list = response.data;
      }); 
    },
    //点击跳转
    getLink(list){
        console.log(list);
        this.$router.push({ path: '/menulist', query:{categoryList:JSON.stringify(list)} })
    }
  }
};
</script>

<style lang="scss" scoped>
.top-banner {
  width: 100%;
  height: 400px;
  background: url("../assets/customization/top-bg.png") no-repeat 0 0;
}
.flow-template {
  background: #fff;
  padding-top: 53px;
  padding-bottom: 100px;
  height: 353;
  .template-title {
    height: 42px;
    font-size: 42px;
    line-height: 42px;
    color: #2f2f2f;
  }
  .template-box {
    margin-top: 72px;
    .path-item {
      margin-left: 60px;
      width: 190px;
      .path-img {
        width: 190px;
        height: 190px;
      }
      .path-des {
        margin-top: 20px;
        padding: 0 10px;
      }
    }
    .case-item {
      width: 277px;
      height: 193px;
      margin-left: 20px;
      .case-img {
        width: 277px;
        height: 193px;
      }
    }
    .path-item:nth-child(1),
    .case-item:nth-child(1) {
      margin: 0;
    }
  }
}

.user-info-box {
  padding-top: 50px;
  width: 100%;
  height: 280px;
  .user-box-title {
    margin-bottom: 46px;
    font-size: 30px;
    line-height: 30px;
    color: #292929;
  }
  .input300 {
    width: 300px;
    margin-right: 20px;
    height: 60px;
  }
  .input558 {
    width: 558px;
    height: 60px;
  }
  .sub-btn {
    margin: 36px;
    width: 300px;
    height: 60px;
    font-size: 18px;
  }
}

/*手机端*/
@media (min-width: 320px) and (max-width: 800px) {
  .top-banner {
    height: 140px;
    background-size: 100% 100%;
  }
  .flow-template {
    padding: 30px 0;

    .template-title {
      font-size: 22px;
    }
    .template-box {
      margin-top: 20px;
      flex-wrap: wrap;
      .path-item {
        &:first-child {
          margin-right: 30px;
        }
        width: 33.33%;
        margin: 0;
        .path-img {
          width: 120px;
          height: 120px;
        }
        .path-des {
          margin-top: 10px;
        }
      }

      .case-item {
        width: 45%;
        height: 140px;
        margin-left: 0 !important; 
        &:nth-child(odd){
          margin-right: 10px;
        }
        .case-img {
          width: 100%;
          height: 130px;
        }
      }
    }
  }
  .user-info-box {
    .area1190 {
      width: 100%;
    }
    .user-box-title {
      width: 100%;
      font-size: 18px;
    }
    .input-info-box {
      position: relative;
      height: 100px;
      padding: 0 10px;
      width: 100%;
      box-sizing: border-box;
      justify-content: space-between;
    }
    .input300 {
      width: 45%;
      margin: 0;
    }
    .input558 {
      position: absolute;
      top: 50px;
      width: 94%;
    }
    .sub-btn {
      margin: 10px;
      height: 40px;
      padding: 4px;
    }
  }
  
}
</style>